<template>
  <div>
    <van-nav-bar title="购物车" left-arrow @click-left="$router.back()"></van-nav-bar>
    <!-- 商品卡片部分 -->
    <div class="goods-card" v-for="(item,i) in goodsCarListData" :key="i">
      <div class="img1">
        <img :src="item.goods_img" alt />
        <span class="goodsName van-ellipsis">{{item.goods_name}}</span>
      </div>
      <!-- 计件 -->
      <van-stepper
        class="goods-num"
        v-model="item.goodsCar_num"
        input-width="20px"
        button-size="28px"
        theme="round"
      />
      <!-- 单价 -->
      <span class="goods-price">￥{{item.current_price*10*item.goodsCar_num/10}}</span>
    </div>
    <!-- /商品卡片部分 -->

    <div class="bottom">
      <van-cell-group>
        <van-cell title="包装" :value="'￥' + packingPrice" />
        <van-cell title="到店自提" value="￥0" />
        <van-cell title="合计" :value="totalPrice" />
      </van-cell-group>
    </div>
    <!-- 结算 -->
    <van-submit-bar :price="totalPrice*100" button-text="提交订单" @submit="onSubmit" />
  </div>
</template>

<script>
import { getgoods, getShops } from '@/api/shops.js'
import { getItem } from '@/utils/storage'

export default {
  components: {

  },
  props: {

  },
  data () {
    return {
      packingPrice: 2,
      goodsCarListData: getItem('goodsCarListData'),
      good: [],
      shops: {}
    }
  },
  watch: {

  },
  computed: {
    totalPrice () {
      var price = 0
      this.goodsCarListData.forEach(item => {
        price += item.goodsCar_num * item.current_price
      })
      return price + this.packingPrice
    }
  },
  created () {
    this.goodslist()
  },
  mounted () {

  },
  methods: {
    async goodslist () {
      this.$store.commit('setGoodsLists', null)
      this.$toast.loading({
        message: '获取店铺信息中...',
        forbidClick: true, // 禁用背景点击
        duration: 0 // 持续时间，默认 2000，0 表示持续展示不关闭
      })
      try {
        const { data } = await getShops({
          pageNum: 1,
          pageSize: 20
        })
        // 随机获取店铺里的某一家店铺 Math.floor(Math.random() * (max - min + 1)) + min
        const i = Math.floor(Math.random() * (12 - 0 + 0)) + 0
        this.shops = data.data.rows[i]
        console.log(this.shops)
        this.$store.commit('setStore', this.shops)
        this.$toast(data.meta.msg)
      } catch (err) {
        this.$toast('数据获取失败')
      }
    },
    async onSubmit () {
      this.$store.commit('setGoodsLists', null)
      try {
        const { data } = await getgoods({
          pageNum: 1,
          pageSize: 20,
          shop_id: this.shops.shop_id
          // shop_id: 36
        })
        console.log(data)
        console.log(data.data.rows)
        if (data.data.rows.length === 0) {
          this.$toast.clear()
          this.$toast('本店没有商品')
          // 换一家店铺
          this.getAnother()
        }
        if (data.data.rows.length <= 3) {
          this.good = data.data.rows
          this.$store.commit('setShops', this.good)
        } else {
          console.log(data.data.rows.length)
          data.data.rows.forEach((item, index) => {
            if (index < 3) {
              this.good.push(item)
            }
          })
          this.$store.commit('setShops', this.good)
        }
        this.$router.push({
          name: 'hh'
        })
      } catch (err) {
        this.$toast('数据获取失败')
      }
    },
    async getAnother () {
      try {
        this.$toast.loading({
          message: '获取Id36的商家商品中...',
          forbidClick: true, // 禁用背景点击
          duration: 3000 // 持续时间，默认 2000，0 表示持续展示不关闭
        })
        const { data } = await getgoods({
          pageNum: 1,
          pageSize: 20,
          shop_id: 36
        })
        console.log(data.data)
      } catch (err) {
        this.$toast('数据获取失败')
      }
    }
  }
}
</script>

<style scoped lang="less">
/deep/.van-nav-bar .van-icon {
  color: #000;
  font-weight: 1000;
}

// 商品卡片区域
.goods-card {
  background-color: #fafafa;
  height: 200px;
  display: flex;
  text-align: center;
  line-height: 200px;
  .img1 {
    flex: 2;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    img {
      width: 160px;
      margin-right: 20px;
    }
    .goodsName {
      width: 140px;
    }
  }
  .goods-num {
    flex: 1;
  }
  .goods-price {
    flex: 1;
    font-size: 36px;
  }
}

// <!-- 费用合计 -->
.van-cell-group {
  width: 100%;
  position: absolute;
  bottom: 160px;
}
</style>
